<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">发布文章</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="articleForm" class="form-horizontal">
                <input id="status" type="hidden" name="status">
                <input id="articleContent" type="hidden" name="content">
                <input id="articleContentMd" type="hidden" name="contentMd">
                <div class="col-lg-8 pl0">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input type="text" class="form-control" id="title" name="title" placeholder="请输入文章标题" require="">
                        </div>
                    </div>
                    <div class="form-group form-editor">
                        <div class="col-xs-12">
                            <textarea id="articleField"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <a class="article-btn table-btn table-btn-info" onclick="saveArticle(0)">保存草稿</a>
                            <a class="article-btn table-btn table-btn-info ml10" onclick="saveArticle(1)">发布文章</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章类型:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal"  type="radio"  name="original" checked  value="1">原创
                                </label>
                                <label>
                                    <input class="minimal"  type="radio"  name="original" value="0">转载
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12 ">
                            <label class="control-label label-four" >文章分类:</label>
                            <div class="ml80">
                                <select id="category-select" class="form-control" name="categoryId" require="">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章标签:</label>
                            <div class="tags checkbox icheck ml80">
                                <label th:each="tag:${tags}">
                                    <input class="minimal" type="checkbox"  name="tag"  th:value="${tag.id}" th:text="${tag.name}">
                                </label>
                            </div>
                        </div>

                    </div>
                 <!--   <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章简介:</label>
                            <div class="ml80">
                                <textarea type="text" rows="3" class="form-control" name="description" require=""></textarea>
                            </div>
                        </div>
                    </div>-->
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章封面:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input type="text"  class="form-control" name="coverImage" id="coverImage" placeholder="文章封面地址" require="">
                                <div class="btn btn-default input-group-btn jax-upload-btn" style="min-width: 50px">
                                    <i class="fa fa-cloud-upload upload-img-btn"></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="upload-content" class="upload-content form-group"></div>
                    <div id="sliderImgContent" class="form-group display-none">
                        <div class="col-xs-12">
                            <label class="control-label label-four">轮播图:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input id="sliderImg" type="text" class="form-control" name="sliderImg" placeholder="轮播图地址（建议800*300）" require="">
                                <div class="btn btn-default input-group-btn jax-upload-btn" style="min-width: 50px">
                                    <i class="fa fa-cloud-upload upload-slider-btn"></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否轮播:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal"  type="radio"  name="slider"  value="1">是
                                </label>
                                <label>
                                    <input class="minimal"  type="radio"  name="slider" checked  value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否置顶:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio"  name="top"  value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio"  name="top" checked  value="0">否
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否推荐:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio"  name="recommended"  value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio"  name="recommended" checked  value="0">否
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">开启评论:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio"  name="comment"  checked  value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio"  name="comment"  value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra mt20">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">概要:</label>
                            <div class="ml80">
                                <textarea type="text" rows="2" class="form-control" name="description" require="" placeholder="文章概要"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">关键词:</label>
                            <div class="ml80">
                                <textarea type="text" rows="2" class="form-control" name="keywords" require="" placeholder="文章关键词（SEO优化）"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
    var myEditor;
    ClassicEditor
        .create(document.querySelector("#articleField"), {
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                uploadUrl: '[[@{/attachment/upload2Qiniu}]]'
            }
        })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>
<script>
    /*去tm的thymeleaf，只能祭出jq了？*/
    var categories = "[[${categories}]]";
    var categoriesObj = JSON.parse(categories.replace(/&quot;/g, '"'));
    var html='<option value="">请选择</option>';
    $.each(categoriesObj,function (i,item) {
        if(item.nodes.length>0){
            html+='<optgroup label="'+item.name+'" >';
            $.each(item.nodes,function (j,jItem) {
                html+='<option value="'+jItem.id+'">'+jItem.name+'</option>';
            })
            html+='</optgroup>';
        }else if(item.parent==null){
            html+='<option value="'+item.id+'">'+item.name+'</option>';
        }
    })
    $("#category-select").html(html);

    $("input[name=slider]").on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
        var slider = $("input[name=slider]:checked").val();
        var sliderSize=$("#upload-content").find(".upload-slider-div").size();
        if(slider==1){
            $("#sliderImgContent").show();
            if(sliderSize==1){
                $(".upload-slider-div").show();
            }
        }else{
            $("#sliderImgContent").hide();
            if(sliderSize==1){
                $(".upload-slider-div").hide();
            }
        }
    });

    $('[type="checkbox"].minimal,input[type="radio"].minimal').iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue',
    });

    function  saveArticle(status) {
        if(validArticle()){
            Core.confirm("确认保存文章？",function () {
                $("#status").val(status);
                Core.postAjax("/article/add",$("#articleForm").serialize(),function (data) {
                    if(data.status === 200){
                        myEditor.setData('');
                        Core.load("#content","article/add");
                    }
                    layer.msg(data.msg)
                })
            })
        }
    }

    function  validArticle() {
        if(doValidForm(articleForm)){
            var content = myEditor.getData();
            if(content){
                $("#articleContentMd").val(content);
                $("#articleContent").val(content);
                var tags =[];
                $('input[name="tag"]:checked').each(function(){
                    tags.push($(this).val());
                });
                if(tags.length>0){
                    return true;
                }else{
                    layer.msg("请选择文章标签！")
                }
            }else{
                layer.msg("请输入文章内容！")
            }
        }
        return false;
    }

    function changeSlider(val) {
        console.log(val);
    }

    $(function () {
        /*上传图片*/
        $(".upload-img-btn").click(function(){
            if($("#upload-content").find(".upload-img-div").size()==0){
                var imgHtml = '<div class="col-md-12 upload-div upload-img-div">'+
                        '<div class="upload-item">'+
                        '<p class="upload-title">封面图</p>'+
                        '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>'+
                        '<p class="upload-btns">'+
                        '<a type="button" class="btn btn-sm btn-block btn-info imgUploader">上传</a>'+
                        '</p>'+
                        '</div>'+
                        '</div>'
                $("#upload-content").append(imgHtml);
                $(".imgUploader").upload({
                    server : '[[@{/attachment/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept:true
                }, function(url, picker) {
                    $("#coverImage").val(url);
                    echoGtUploadResMethd(url,picker);
                });
            };
        })

        $(".upload-slider-btn").click(function(){
            if($("#upload-content").find(".upload-slider-div").size()==0){
                var imgHtml = '<div class="col-md-12 upload-div upload-slider-div">'+
                    '<div class="upload-item">'+
                    '<p class="upload-title">轮播图</p>'+
                    '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>'+
                    '<p class="upload-btns">'+
                    '<a type="button" class="btn btn-sm btn-block btn-info sliderUploader">上传</a>'+
                    '</p>'+
                    '</div>'+
                    '</div>'
                $("#upload-content").append(imgHtml);
                $(".sliderUploader").upload({
                    server : '[[@{/attachment/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept:true
                }, function(url, picker) {
                    $("#sliderImg").val(url);
                    echoGtUploadResMethd(url,picker);
                });
            };
        })




    })
</script>